<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表情分析</title>
    <script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js'></script>
    <style>
    .booth {
      width:500px;
      background:#ccc;
      border: 10px solid #ddd;
      margin: 0 auto;
    }
    </style>
</head>
<body>

    <div class="booth">

    <video id="video" width="500" height="400"></video>
    <button id='tack' >拍照</button>
    <canvas id='canvas' width='500' height='400' style="display:none" ></canvas>
    <img id='img' src='' name="img">
    <img id="img_show" width="500" height="400" src=""  style="display:none" >
    <input type="textarea" id="Recogn"  style="width:400px;height:100px">
    </div>

<script>



    $.ajaxSetup({
        data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
    })

    var token = $('input[name=csrfmiddlewaretoken]').val();
    var video = document.getElementById('video'),
    canvas = document.getElementById('canvas'),
    snap = document.getElementById('tack'),
    //down = document.getElementById('down'),
    img = document.getElementById('img'),


    vendorUrl = window.URL || window.webkitURL;

                //媒体对象
    navigator.getMedia = navigator.getUserMedia ||
                         navagator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;
    navigator.getMedia({
    video: true, //使用摄像头对象
    audio: false  //不适用音频
    }, function(strem){
        //这个方法要报错：video.src = window.URL.createObjectURL(strem);
        video.srcObject = strem;
        video.onloadedmetadata = function(e) {
            video.play();
        };
    }, function(error) {
        console.log(error);
    });


    snap.addEventListener('click', function(){



        canvas.getContext('2d').drawImage(video,0,0,400,300);
        //canvas.style = ""
        img=canvas.toDataURL('image/jpg')


        img=img.split(',')[1];

        img = img.toString()
        $.ajax({
            url:"/face1/",
            type:"post",
            data:{
                "base64_11":img,
            },
            success: function (data) {
                //console.log(data);
                //$("#img_show").attr("style","")
                //$("#img_show").attr("src","data:image/jpg;base64,"+data)
                $("#Recogn").val(data);

            }
        })

 })

</script>

</body>
</html>